<template>
  <div class="mainDiv">
    <div style="display: block;height: 100%;">
      <div style="display: flex;flex-direction: column;justify-content: space-around;align-items: flex-start;">
       <div>
        <CheckBox v-model="onlyCheckLeaf" label="只允许选择叶子节点"></CheckBox>
       </div>
       <p></p>
       <div>选中的节点：</div>
       <div v-for="item in selectItems" :key="item.id">
         {{item.name}}
       </div>
    </div>
    </div>
    <tree-view  style="height: 500px;width:300px;background-color: antiquewhite;"
    :dataSource="dataList"
     parentAttr="parent" 
     parentTarget="id"
     :onlyCheckLeaf="onlyCheckLeaf"     
     :disable="(item)=>{return item.id == '130003'}"
     ref="treeView"
     @selectChange = "selectChange"
     ></tree-view>
  </div>
</template>

<script>
import TreeView from './TreeView.vue';
import CheckBox from '../CheckBox/CheckBox.vue';
export default {
  components: {
    TreeView,
    CheckBox,
  },
  data() {
    return {
      dataList:[
        {
          id:'100',
          name:'中国',          
        },
        {
          id:'130',
          name:'河北',
          parent: '100'
        },
        {
          id:'130001',
          name:'石家庄',
          parent: '130'
        },
        {
          id:'130002',
          name:'衡水',
          parent: '130'
        },
        {
          id:'130003',
          name:'张家口',
          parent: '130'
        },
        {
          id:'130004',
          name:'廊坊',
          parent: '130'
        },
        {
          id:'650',
          name:'新疆维吾尔自治区',
          parent: '100'
        },
        {
          id:'650001',
          name:'乌鲁木齐市',
          parent: '650'
        },
        {
          id:'650002',
          name:'伊犁州',
          parent: '650'
        }
      ],
      selectItems:[],
      onlyCheckLeaf:false,
    }
  },
  methods:{
    selectChange(){
      this.selectItems = this.$refs.treeView.selectItems;
    }
  }
}
</script>

<style scoped>
.mainDiv{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around
}
</style>